require('../css/commonCss/normalize.css')
require('../css/commonCss/basic.css')
require('../css/commonCss/property.css')
require('../css/commonCss/reset.css')
require('../liabs/iconfont/iconfont.css')
require('../css/commonCss/footer.less')
require('../css/train.less')

const axios = require('axios')

//引入weui
require('weui')
const weUi = require('weui.js')

//文档加载事件
document.addEventListener('DOMContentLoaded', function () {
    //获取元素
    let videoUrl = document.querySelector('#videoUrl')
    let title = document.querySelector('#title')
    let number = document.querySelector('#number')
    let rightBtn = document.querySelector('#rightBtn')
    let startBtn = document.querySelector('#startBtn')
    let stopBtn = document.querySelector('#stopBtn')
    let goOn = document.querySelector('#goOn')
    let end = document.querySelector('#end')
    let imgurl = document.querySelector('#imgUrl')
    let courseTitle = document.querySelector('#courseTitle')
    let progress = document.querySelector('#progress')
    let mask = document.querySelector('#mask')

    let timeId = null;//训练时间的计时器
    let time = 0;//定义变量保存训练时间


    //渲染视频
    let fragments = JSON.parse(sessionStorage.videoUrl)
    let courNum = fragments.length
    console.log(courNum)
    let index = 0;//定义变量保存当前的索引
    function renderData() {
        videoUrl.src = 'http://139.9.177.51:8099' + fragments[index].videoUrl;//渲染视频路径
        videoUrl.autoplay = true;
        title.textContent = fragments[index].title//渲染标题
        courseNumber.textContent = courNum//渲染课程总节
        number.textContent = index + 1//当前课程节
        imgurl.src = 'http://139.9.177.51:8099' + fragments[index].imgUrl
        courseTitle.textContent = fragments[index].title;
    }
    renderData()


    //下一个视频
    console.log(index)
    rightBtn.addEventListener('click', function () {
        //判断
        index++;
        console.log(index)
        if (index > courNum - 1) {
            index = 0;
            renderData() //调用函数
        } else {
            renderData() //调用函数
        }
    })

    //上一个视频
    leftBtn.addEventListener('click', function () {
        //判断
        index--;
        console.log(index)
        if (index < 0) {
            index = courNum - 1;
            renderData() //调用函数
        } else {
            renderData() //调用函数
        }
    })

    //暂停
    startBtn.addEventListener('click', function () {
        mask.style.display = 'block'
        startBtn.style.display = 'none'
        stopBtn.style.display = 'block'
        videoUrl.pause();

        clearInterval(timeId)//清除计时器
    })

    //继续
    goOn.addEventListener('click', function () {
        mask.style.display = 'none';
        startBtn.style.display = 'block'
        stopBtn.style.display = 'none'
        videoUrl.play()

        getTrainTime()//重新开启这个计时器
    })

    //结束
    end.addEventListener('click', function () {
        let params = {
            id: sessionStorage.cid,
            userId: localStorage.userId,
            takeTime: time,
            calorie: time * 6,
        }
        console.log(params)
        console.log(time)
        axios.post('http://139.9.177.51:8099/sports/saveTrain', params).then(function (res) {
            console.log(res.data)
            if (res.data.status === 0) {
                weUi.toast(`您消耗了${params.calorie}的卡路里`, {
                    callback: function () {
                        location.href = './course.html'
                    }
                })
            } else {
                weUi.alert('下次加油', function () {
                    setTimeout(function () {
                        location.href = './course.html'
                    }, 1000)
                })
            }
        })
    })

    //进度条
    videoUrl.addEventListener('timeupdate', function () {
        progress.style.display = 'block'
        //当前时间/总时间 = 当前进度条长度/进度条总长度
        let totalTime = videoUrl.duration //总时间
        let currentTime = videoUrl.currentTime //当前时间
        let currentWidth = currentTime * 100 / totalTime
        console.log(currentWidth)
        progress.style.width = currentWidth + '%'
    })

    //当前视频结束后自动播放下一个
    videoUrl.addEventListener('ended', function () {
        weUi.toast('即将播放下一个')
        setTimeout(function () {
            rightBtn.click()
        }, 2000)
    })

    //记录训练时间
    function getTrainTime() {
        timeId = setInterval(function () {
            time++;
        }, 1000)
    }
    getTrainTime()
})